<template>
  <div class="login-bg">
    <div class="login-center">
      <div class="login-card">
        <div class="login-header">
          <h1>账号密码登录</h1>
          <p class="subtitle">请使用已注册的账号密码</p>
        </div>
        <form @submit.prevent="handleLogin">
          <div class="input-group">
            <span class="input-icon"><i class="iconfont icon-mobile"></i></span>
            <select v-model="areaCode" class="area-code">
              <option value="+86">+86</option>
              <option value="+852">+852</option>
              <option value="+853">+853</option>
              <option value="+886">+886</option>
            </select>
            <input v-model="username" type="text" placeholder="请输入手机号" required class="input" />
          </div>
          <div class="input-group">
            <span class="input-icon"><i class="iconfont icon-lock"></i></span>
            <input :type="showPwd ? 'text' : 'password'" v-model="password" placeholder="请输入6~12位密码" required class="input" />
            <span class="eye-icon" @click="showPwd = !showPwd">
              <i class="iconfont" :class="showPwd ? 'icon-eye' : 'icon-eye-close'"></i>
            </span>
          </div>
          <div class="row-between">
            <label class="checkbox-label">
              <input type="checkbox" v-model="rememberPwd" /> 记住密码
            </label>
            <a href="#" class="forget">忘记密码?</a>
          </div>
          <div class="row-between agree-row">
            <label class="checkbox-label">
              <input type="checkbox" v-model="agree" />
              同意《平台服务协议》和《隐私政策》
            </label>
          </div>
          <button type="submit" :disabled="loading || !agree" class="login-btn">{{ loading ? '登录中...' : '登 录' }}</button>
          <p v-if="error" class="error">{{ error }}</p>
          <p v-if="successMessage" class="success">{{ successMessage }}</p>
        </form>
        <div class="other-login">
          <a href="#" @click.prevent="goToRegister" class="code-login">注册新账户</a>
        </div>
        <div class="divider"></div>
        <div class="third-login">
          <!-- <span class="icon wechat"></span>
          <span class="icon qq"></span>
          <span class="icon apple"></span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userAPI, apiUtils } from '@/services/api';

export default {
  name: 'LoginPage',
  data() {
    return {
      username: '',
      password: '',
      areaCode: '+86',
      showPwd: false,
      rememberPwd: false,
      agree: false,
      loading: false,
      error: '',
      successMessage: ''
    };
  },
  mounted() {
    // 检查是否从注册页面跳转过来
    if (this.$route.query.registered) {
      this.successMessage = '注册成功！请使用您的账户登录';
      // 3秒后清除消息
      setTimeout(() => {
        this.successMessage = '';
      }, 3000);
    }
  },
  methods: {
    async handleLogin() {
      if (!this.agree) return;
      this.loading = true;
      this.error = '';
      try {
        const data = await userAPI.login(this.username, this.password);
        if (data.success) {
          apiUtils.setAuth(data.data.token, data.data.user);
          this.$router.push('/sample');
        } else {
          this.error = data.error || '登录失败';
        }
      } catch (e) {
        this.error = e.message || '网络错误';
      } finally {
        this.loading = false;
      }
    },
    goToRegister() {
      this.$router.push('/register');
    }
  }
};
</script>

<style scoped>
@import url('//at.alicdn.com/t/c/font_4244842_1v7v6k2k2k.css');
.login-bg {
  min-height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-center {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 28px;
  /* box-shadow: 0 6px 36px rgba(80, 112, 255, 0.10); */
  padding: 56px 32px 36px 32px;
  width: 94vw;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-header {
  text-align: center;
  margin-bottom: 38px;
}
.login-header h1 {
  font-size: 2.3rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 14px;
}
.subtitle {
  color: #bbb;
  font-size: 1.1rem;
  margin-bottom: 0;
}
.input-group {
  display: flex;
  align-items: center;
  background: #f6f7fa;
  border-radius: 16px;
  margin-bottom: 28px;
  padding: 0 18px;
  border: 1px solid #f0f0f0;
  height: 54px;
}
.input-icon {
  color: #bbb;
  font-size: 22px;
  margin-right: 10px;
}
.area-code {
  border: none;
  background: transparent;
  font-size: 16px;
  color: #222;
  margin-right: 8px;
  outline: none;
}
.input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 18px;
  padding: 14px 0;
  outline: none;
}
.eye-icon {
  color: #bbb;
  font-size: 20px;
  cursor: pointer;
  margin-left: 10px;
}
.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 18px;
}
.checkbox-label {
  font-size: 15px;
  color: #666;
  user-select: none;
}
.forget {
  color: #409eff;
  font-size: 15px;
  text-decoration: none;
}
.agree-row {
  margin-bottom: 28px;
}
.login-btn {
  width: 100%;
  padding: 16px 0;
  background: #9ee6b0;
  color: #fff;
  border: none;
  border-radius: 28px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 18px;
  letter-spacing: 8px;
  transition: background 0.2s;
}
.login-btn:active {
  background: #7edc97;
}
.login-btn:disabled {
  background: #e0e0e0;
  color: #fff;
  cursor: not-allowed;
}
.error {
  color: #e74c3c;
  margin-top: 12px;
  font-size: 15px;
  text-align: center;
}

.success {
  color: #4caf50;
  margin-top: 12px;
  font-size: 15px;
  text-align: center;
}
.other-login {
  margin: 28px 0 16px 0;
  text-align: center;
}
.code-login {
  color: #4caf50;
  font-size: 17px;
  text-decoration: none;
}
.divider {
  margin: 28px 0 16px 0;
  color: #bbb;
  font-size: 15px;
  text-align: center;
  position: relative;
}
.divider:before, .divider:after {
  content: '';
  display: inline-block;
  width: 30%;
  height: 1px;
  background: #eee;
  vertical-align: middle;
  margin: 0 10px;
}
.third-login {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 10px;
}
.icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-block;
  background: #f6f7fa;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.icon.wechat {
  background: #1aad19 url('https://img.icons8.com/color/48/000000/weixing.png') center/60% no-repeat;
}
.icon.qq {
  background: #12b7f5 url('https://img.icons8.com/color/48/000000/qq.png') center/60% no-repeat;
}
.icon.apple {
  background: #222 url('https://img.icons8.com/ios-filled/50/ffffff/mac-os.png') center/60% no-repeat;
}
</style> 